<!-- v-bind用于绑定html的属性值如class,href等 -->
<!-- v-bind:可以缩写成: -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
  .class1{
  background: #444;
  color: #eee;
}
</style>

<body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <!-- <div class='class1'> -->
    <div v-bind:class="{'class1': class1}">
      v-bind:class 指令
    </div>
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        class1: false,
        url: 'http://www.runoob.com',
      },
    });
  </script>
</body>

</html>